<template>
	<div style="width: 375px; position: relative;">
		<div class="video-card">
			<div class="card-title">
				{{title}}
			</div>
			<div class="card-list">
				<div v-for="item in Object.values(mediaList)">
					<div class="item">
						<div class="pic">
							<img style="width: 100%;height: 85px;object-fit: cover; object-position: center;"
								:src="item.cover_image" alt="">
						</div>
						<div class="title">
							{{item.title}}
						</div>
						<div class="progress">
							进度: <div class="line">&nbsp;</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		defineComponent
	} from 'vue';
	export default defineComponent({
		name: 'ActVideoList',
		data() {
			return {

			};
		},
		props: {
			title: String,
			mediaList: Object
		},
		computed: {


		}
	});
</script>
<style scoped lang="scss">
	.video-card {
		width: 360px;
		margin: 7.5px 7.5px;
		background-color: #FFF;
		border-radius: 7.5px;
		display: flex;
		flex-direction: column;
		border: 1px solid #eee;

		.card-title {
			font-size: 18px;
			font-weight: 900;
			padding-left: 10px;
			line-height: 40px;
			height: 40px;
			border-bottom: 1px solid #eee;
		}

		.card-list {
			display: flex;
			flex-direction: row;
			gap: 7.5px;
			flex-wrap: wrap;
			justify-content: space-between;
			margin: 7.5px 7.5px;

			.item {
				width: 165px;
				border: 1px #eee solid;
				border-radius: 5px;

				.title {
					margin-left: 5px;
					margin-top: 5px;
					font-family: 900;
					font-size: 14px;
				}

				.progress {
					margin-left: 5px;
					display: flex;
					flex-direction: row;
					align-items: center;

					.line {
						margin-left: 5px;
						width: 115px;
						height: 5px;
						border-radius: 2px;
						background-color: rgb(204, 204, 204);
						display: block !important;
					}
				}
			}
		}
	}
</style>
